<template>
	<div class="pagination">
		<div class="box">
			<el-pagination background
						   @size-change="sizeChange"
						   @current-change="currentChange"
						   :current-page="page"
						   :page-sizes="[5, 10, 20, 50]"
						   :page-size="pageSize"
						   layout="total, sizes, prev, pager, next, jumper"
						   :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	name: 'pagination',
	props: {
		total: {
			required: true,
			type: Number
		},
		page: {
			required: true,
			type: Number,
			default: 1
		},
		pageSize: {
			required: true,
			type: Number
		}
	},
	methods: {
		sizeChange (pageSize) {
			this.$emit('pageChange', 1, pageSize)
		},
		currentChange (val) {
			this.$emit('pageChange', val)
		}
	}
}
</script>

<style lang="less" scoped>
.pagination {
	padding: 20px 0;
	text-align: center;
	border-radius: 5px;
	background-color: #fff;

	.box {
		display: inline-block;
	}
}
</style>
